import * as React from 'react';
import { SystemStore, languaConfig } from '../../store/SystemStore';
import { observer, inject } from 'mobx-react';
import './index.less'
import { Button, Radio, message } from 'antd';
import PasChange from './PasChange';
import { resetDB } from '../../dbtemp/HandleDB';
import { isOpenDB } from '../../config/SystemConfig';
import { mesDataCache } from '../../dbCache/dbCacheData';
import Utils from '../../utils/utils'
import env from '../../utils/env'
import ipcRender from '../../ipcRender';

export interface ISettingCommonProps {

}

export interface ISettingCommonState {
  cacheInfo:{
    size:number
  },
  debug?:any
}
interface withStore extends ISettingCommonProps {
  systemStore: SystemStore
}

@inject('systemStore')
@inject('loginStore')
@observer
export default class SettingCommon extends React.Component<ISettingCommonProps, ISettingCommonState> {
  constructor(props: ISettingCommonProps) {
    super(props);
    this.state = {
      cacheInfo:{
        size:62.8*1024*1024
      },
      debug:{
        env:env.name,
        nocache: Number(ipcRender.getGlobalItem('nocache',null))||0
      }
    }
  }
  get injected() {
    return this.props as withStore
  }
  
  lanOption = [
    { name: languaConfig['zh-CN'], key: 'zh-CN' },
    //{ name: languaConfig['zh-hant'], key: 'zh-hant' },
    { name: languaConfig['en-US'], key: 'en-US' },
  ];
  changeLanguage = (key : string) => {
    // message.warn('暂未开放')
     this.injected.systemStore.changeLangua(key)
  }
  
  clearLocalCache = () => {
    isOpenDB && resetDB();
    mesDataCache.clearDataCache();
    this.injected.systemStore.clearCache();
    message.success("清除成功");
    this.setState({
      cacheInfo:{
        size:0
      }
    })
  }
  
  public reload(){
    location.href='/'
  }
  public render() {
    const { systemStore } = this.injected;
    const cacheFileInfo =  Utils.formatFileSize(this.state.cacheInfo.size)

    return (
      <>
        <div className='setting-common'>
          <div className='setting-detail-head'>
            设置
          </div>
          <div className='setting-detail-body'>
          <div className='section'>
              <h3>调试配置</h3>
              <div className="content">
                <div className="block">
                  <div>环境选择</div>
                  <div className="info">
                      <Radio.Group value={this.state.debug.env} onChange={(e)=>{
                        const value = e.target.value;
                        this.setState({
                          debug:{
                            ...this.state.debug,
                            env:value
                          }
                          
                        })
                        ipcRender.clearGlobal('env')
                        console.log(' 修改环境', value)
                        ipcRender.setGlobalItem('env', value)
                        message.warn('修改成功，正在刷新应用..')
                        setTimeout(()=>{
                          this.reload()
                        },2000)
                      }}>
                        <Radio value=''>开发环境</Radio>
                        <Radio value='pre'>预发环境</Radio>
                      </Radio.Group>
                  </div>
                </div>
                <div  className="block">
                  <div>是否启用消息缓存</div>
                  <div className="info">
                    <Radio.Group value={this.state.debug.nocache} onChange={(e)=>{
                      const value = e.target.value;
                      this.setState({
                        debug:{
                          ...this.state.debug,
                          nocache:value
                        }
                        
                      })
                      ipcRender.clearGlobal('nocache')
                      if( value ){
                        ipcRender.setGlobalItem('nocache', 1)
                      }
                      message.warn('修改成功，正在刷新应用..')
                      setTimeout(()=>{
                        this.reload()
                      },2000)
                    }}>
                      <Radio value={1}>无缓存</Radio>
                      <Radio value={0}>有缓存</Radio>
                    </Radio.Group>
                 </div>
                </div>
                
                <div><Button onClick={(e)=>{
                  this.reload()
                }}>刷新应用</Button></div>
              </div>
            </div>

            <div className='section'>
              <h3>语言</h3>
              <div className="content content-language">
                <Radio.Group value={systemStore.language} onChange={(e)=>{
                  this.changeLanguage(e.target.value)
                }}>
                {

                  this.lanOption.map((item, index) => {
                    return (
                      <div className='item' key={index} onClick={()=>{
                        this.changeLanguage(item.key)
                      }}>
                        <div className='item-name'>{item.name}</div>
                        <Radio value={item.key}></Radio>
                      </div>
                    )
                  })
                }
                </Radio.Group>
              </div>
            </div>
            {/*  cache */}
            <div className='section'>
              <h3>清除缓存</h3>
              <div className="content content-cache">
                <div className="info">
                    <div>缓存数据</div>
                    <div><span className='number'>{cacheFileInfo.size}</span><span className='unit'>{cacheFileInfo.unit}</span></div>
                </div>
                <Button type="primary" onClick={this.clearLocalCache}>清除缓存</Button>
              </div>
            </div>
            
            {/*  account */}
            <div className='section'>
              <h3>修改密码</h3>
              <div className="content content-passchange">
                <PasChange></PasChange>
              </div>
            </div>
          </div>
          
        </div>
      </>
    );
  }
}
